<template>
  <div>

    <!--    标题-->
    <div class="flex align-center justify-center margin-tb">
      <div class="line"></div>
      <div class="title margin-lr-20">联系我们</div>
      <div class="line"></div>
    </div>

    <div class="flex content-wrap">
      <div class="img-area">

        <!--        公司信息内容-->
        <div class="info-wrap">
          <img src="../assets/imgs/CONTACTUS.png" class="margin-bottom-10" style="width: 280px">
          <span class="dis-block lxwm-span">联系我们</span>
          <span class="dis-block contact-us">CONTACT US</span>

          <div class="margin-top-20 font-size16">
            <span class="info-name">地址：</span>
            <span class="info-det">深圳市神舟承运大厦</span>
          </div>
          <div class="margin-top-10 font-size16">
            <span class="info-name">联系人：</span>
            <span class="info-det">黄老师</span>
          </div>
          <div class="margin-top-10 font-size16">
            <span class="info-name">电话：</span>
            <span class="info-det">136-0305-0981</span>
          </div>
          <div class="margin-top-10 font-size16">
            <span class="info-name">微信：</span>
            <span class="info-det">Garywong0513</span>
          </div>
          <div class="margin-top-10 font-size16">
            <span class="info-name">网址：</span>
          </div>
        </div>

        <div class="margin-top">
          <mapDrag @drag="dragMap" class="mapbox"></mapDrag>
        </div>

      </div>

      <!--      右侧-->
      <div class="character-area flex justify-end">
        <div style="width: 200px">
          <div><img src="../assets/imgs/qgdstj.png"></div>
          <div><img src="../assets/imgs/whal_jm.png" class="whal_ym"></div>
          <div><img src="../assets/imgs/dstd_whal.png"></div>
          <div class="pos-re">
            <img src="../assets/imgs/slide1.png" class="whal_ym">

            <div class="weixin-wrap">
              <img src="../assets/imgs/erweima.png" class="ver-middle erweima-img">
              <img src="../assets/imgs/qq.png" class="ver-middle qq-img">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MapDrag from "@/components/MapDrag";

export default {
  name: "Lxwm",
  components: { MapDrag },
  data() {
    return {
      dragData: {
        lng: null,
        lat: null,
        address: null,
        nearestJunction: null,
        nearestRoad: null,
        nearestPOI: null
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {

    },
    dragMap(data) {
      this.dragData = {
        lng: data.position.lng,
        lat: data.position.lat,
        address: data.address,
        nearestJunction: data.nearestJunction,
        nearestRoad: data.nearestRoad,
        nearestPOI: data.nearestPOI
      };
    }
  }
};
</script>

<style scoped lang="scss">

.mapbox {
  width: 90%;
  height: 450px;
}

.info-wrap {

  .info-det {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .info-name {
    color: #666666;
  }

  .lxwm-span {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .contact-us {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}

.weixin-wrap {
  position: absolute;
  top: 30px;
  left: 40px;

  img:nth-child(1) {
    width: 80px;
  }

  img:nth-child(2) {
    margin-left: 5px;
    width: 60px;
  }

}


.img-item {
  width: 33.33%;

  img {
    width: 220px;
    height: 330px;
  }
}

.content-wrap {
  padding: 20px 10%;
  width: 80%;

  .img-area {
    flex: 3;
  }

  .character-area {
    flex: 0 1 260px;

    .whal_ym {
      width: 200px;
      height: 330px;
    }

  }
}

.title {
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #9C5DFB;
}


.line {
  width: 100px;
  height: 2px;
  background-color: #9C5DFB;
}
</style>

